<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>19121630</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./js/index.js"></script>
</head>
<!-- 模仿网站地址为：https://linkaii931.wixsite.com/gamesite -->

<body>
    <hr style="position: fixed;width: 100%;border-top:4px solid rgb(160, 19, 142); ;">

    <!-- 第一部分 -->
    <div id="first_backImage">
        <!-- 导航栏部分 -->
        <header>
            <div id="nav">
                <span><a href="#first_backImage">one</a></span>
                <span><a href="#second">two</a></span>
                <span><a href="#third_backImage">three</a></span>
                <span><a href="#fourth">four</a></span>
                <span><a href="#fifth">five</a></span>
            </div>
            <hr style="width: 100%;border-top: 2px solid rgb(17, 109, 255);border-bottom: 1px solid white;">
        </header>

        <!-- 中间文字部分 -->
        <div id="middle_text">
            <br>
            <p style="font-size: 60px;font-weight: bold;">TECH OTAKUS SAVE</p>
            <p style="font-size: 60px;font-weight: bold;">THE WORLD</p>
            <p style="font-size: 40px;font-weight: bold;">美しく世界のために</p>
            <p style="font-size: 40px;font-weight: bold;">​立ち上がれ</p>
            <img src="./img/bottom.png" style="width: 80px; margin-top: 60px;" alt="">
        </div>

    </div>

    <!-- 第二部分 -->
    <div id="second">
        <!-- 标题 -->
        <div id="second_title">
            <span>​ゲーム情報</span>
            <span></span>
        </div>

        <!-- 图片和文字 -->
        <div id="second_middle">
            <div>
                <img src="./img/backTwo.jpg" alt="">
                <p>新着情報</p>
            </div>
            <div>
                <img src="./img/backTwo.jpg" alt="">
                <p>新着情報</p>
            </div>
            <div>
                <img src="./img/backTwo.jpg" alt="">
                <p>新着情報</p>
            </div>
        </div>
    </div>
    <!-- 第三部分 -->
    <div id="third_backImage">
        <div id="third_left_text">
            <!-- 文字标题 -->
            <div id="third_title">
                <span>​崩壊とは</span>
                <span></span>
            </div>
            <!-- 文字内容 -->
            <div style="margin-top: 80px;">
                <p style="font-size:18px;font-weight: bold;opacity: 0.8;">&emsp;崩壊...かつて人類の文明を幾度となく葬ってきた未知の力...今再びこの平和な世界に降臨した。<br> 　B.C2000年頃、天地異変によって、人々は文明を築いては崩壊するという歴史を繰り返し歩んできた。 　長きに渡る「崩壊」との戦いは大地を疲幣させ、異変した「崩壊獣」が世界各地に現れ始めた。生き残った人々は、滅亡を回避する為に方法を探ろうと、「天命組織」を設立した。<br> その結果、生物の変異から消滅に至る「崩壊現象」と、対抗する力を備えた「聖痕」の存在が確認された。。。。
                </p>
            </div>
        </div>
    </div>
    <!-- 第四部分 -->
    <div id="fourth">
        <!-- 标题 -->
        <div id="second_title">
            <span>​崩壊の世界</span>
            <span></span>
        </div>

        <!-- 图片部分 -->
        <div id="fourth_image">
            <div class="fourth_image_wrap">
                <div><img src="./img/backFour.jpg" alt="1"></div>
                <div><img src="./img/backFour.jpg" alt="2"></div>
            </div>
            <div class="fourth_image_wrap">
                <div><img src="./img/backFour.jpg" alt="3"></div>
                <div><img src="./img/backFour.jpg" alt="4"></div>
            </div>
        </div>
    </div>
    <!-- 第五部分 邮件发送 -->
    <div id="fifth">
        <!-- 左边 -->
        <div id="fifth_left">
            <img src="./img/backTwo.jpg" style="width: 100%;height: 100%;" alt="">
        </div>
        <div id="fift_right">
            <!-- 文字标题 -->
            <div style="width: 100%;text-align: center;padding-top: 120px;">
                <p style="font-size: 50px;font-weight: bold;"><span style="color: white;">C O N T A C T </span><span>U S</span></p>
                <p style="font-size: 20px;font-weight: bold;margin-top: 40px;">この美しい世界のために</p>
                <p style="font-size: 20px;font-weight: bold;">​立ち上がれ！</p>
            </div>
            <!-- form表单 -->
            <form action="email.php" method="POST">
                <div style="display: flex;justify-content: space-between;height:30px;">
                    <input type="text" name="name" style="border-bottom: 1px solid rgb(255, 64, 64);" placeholder="请输入姓名">
                    <input type="email" name="email" style="border-bottom: 1px solid rgb(255, 64, 64);" placeholder="请输入邮箱">
                </div>
                <div style="display: flex;justify-content: space-between;height:30px;margin-top: 5px;">
                    <input type="text" style="width: 100%;padding-top: 5px;" placeholder="请输入电话">
                </div>
                <div style="margin-top: 5px;">
                    <textarea name="text" id="" cols="30" rows="10" placeholder="请入发送的信息内容"></textarea>
                </div>
                <div style="margin-top: 10px;">
                    <button type="submit">提出</button>
                </div>
            </form>
        </div>
    </div>
</body>

</html>